<template>
  <div id="RoomInfo" class="page-wrapper">
    <h1 class="main-title">
      基础设置
    </h1>
    <div class="wrapper">
      <PanelGroup :roomInfo="roomInfo" :adminName="adminName" />
    </div>
    <div class="wrapper main-card">
      <costomer :table-data="Data" @updateTable="fetchData" /> <!-- 监听子组件事件 -->
    </div>
  </div>
</template>
<script>
import costomer from './components/UserTable'
import { getcostomer } from '@/api/pcclinet'
export default {
  name: 'RoomInfo',
  components: {
    costomer
  },
  data() {
    return {
      Data: {}
    }
  },

  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取服务器数据
    fetchData() {
      // 数据接口
      getcostomer().then(res => {
        this.Data = res.data
      })
    },

    handleSubmitClick() {
      searchstudentinfo(this.formData).then(res => {
        this.students = res.data
      })
    },

    moveUser() {
      this.handUser = true
    }
    //新增
  }
}
</script>

<style lang="scss" scoped>
#RoomInfo {
  .qianru {
    color: #fff;
    background-color: #1890ff;
    float: right;
  }
  > .wrapper {
    margin: 40px 0;
  }

  .selector-wrapper {
    display: flex;
    justify-content: space-between;
  }
  .form-wrapper {
    margin-bottom: 40px;
    .btn-wrapper {
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .qianru {
    display: flex;
    justify-content: space-between;
  }
  .selector-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 垂直居中 */
  }
  .search-wrapper {
    display: flex;
  }
  .el-select {
    display: block;
    position: relative;
    position: relative;
  }
  .button-wrapper {
    display: flex;
    justify-content: flex-end; /* 靠右对齐 */
    align-items: center; /* 垂直居中 */
  }
}
</style>
